import { Component } from 'react';

// 高阶组件四种使用场景
// 1. 操作props
// 2. 访问ref
// 3. 状态提升
// 4. 包装组件，实现布局效果

// import('./pages/login').then(res => {
//   console.log('res:', res.default)
// })

const AsyncComponent = (WrapperComponent:any) => {
  return class extends Component {
    state:any = {
      Com: null
    }
    componentDidMount() {
      WrapperComponent.then((res:any) => {
        this.setState({
          Com: res.default
        })
      })
    }

    render() {
      const { Com } = this.state;
      return Com ? <Com /> : null
    }
  }
}

export default AsyncComponent;
